<template>
    <h3>ScriptSetup</h3>
    <p>实时鼠标位置 {{x}},{{y}}</p>
    <hr>
    <p>nameRef {{nameRef}}</p>
    <p>ageRef {{ageRef}}</p>
    <hr>
    <p>name {{name}}</p>
    <p>age {{age}}</p>
    <hr>
    <p>xusui {{xusui}}</p>
    <hr>
    <button @click="sayHello">sayHello</button>
</template>

<!-- 
√ 只要是script顶层的变量和函数 模板都可以直接使用 无需暴露
√ 不需要写export default {}
√ 不需要写setup函数
 -->
<script setup>
import { ref, reactive, toRefs, computed } from "vue"
import useMousePosition from "../hooks/useMousePosition"

// export default {
// setup(props,context) {
// console.log('ScriptSetup setup',props,context);

const { x, y } = useMousePosition()

// ref
const nameRef = ref("steve")
const ageRef = ref(18)

/* reactive */
const state = reactive({
    name: "jobs",
    age: -1
})

const { name, age } = toRefs(state)

/* computed */
const xusui = computed(
    () => ageRef.value + 1
)

/* methods */
const sayHello = ()=>console.log("hello");

/* 数据变化 */
setInterval(() => {
    ageRef.value++
    state.age--
}, 1000);


// return {
//     x,y,
//     nameRef,ageRef,
//     ...toRefs(state),
//     xusui
// }
// }
// }
</script>